<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="system"></ion-back-button>
    </ion-buttons>
    <ion-title>Monitor</ion-title>
    <ion-title slot="end">
      <ion-spinner name="dots" class="fader"></ion-spinner>
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding with-widgets">
  <ion-item-group>
    <ion-item>
      <ion-label>
        <h1>System Time</h1>
        <ng-container *ngIf="now$ | async as now; else timeLoading">
          <h2>
            <ion-text style="color: white">
              <b>{{ now.value | date:'MMMM d, y, h:mm a z':'UTC' }}</b>
            </ion-text>
          </h2>
          <p *ngIf="!now.synced">
            <ion-text color="warning">
              NTP not synced, time could be wrong
            </ion-text>
          </p>
        </ng-container>
        <ng-template #timeLoading>
          <h2>Loading...</h2>
        </ng-template>
      </ion-label>
      <ion-note slot="end" class="metric-note"></ion-note>
    </ion-item>

    <ion-item>
      <ion-label>
        <h1>System Uptime</h1>
        <h2>
          <ion-text style="color: white">
            <ng-container *ngIf="uptime$ | async as uptime; else uptimeLoading">
              <b>{{ uptime.days }}</b>
              Days,
              <b>{{ uptime.hours }}</b>
              Hours,
              <b>{{ uptime.minutes }}</b>
              Minutes,
              <b>{{ uptime.seconds }}</b>
              Seconds
            </ng-container>
            <ng-template #uptimeLoading>Loading...</ng-template>
          </ion-text>
        </h2>
      </ion-label>
    </ion-item>
  </ion-item-group>

  <ng-container *ngIf="metrics$ | async as metrics; else loading">
    <ion-item-group *ngIf="metrics.general as general">
      <ion-item-divider>General</ion-item-divider>
      <ion-item>
        <ion-label>Temperature</ion-label>
        <ion-note slot="end">
          <ng-container *ngIf="general.temperature; else noTemp">
            {{ general.temperature.value }} &deg;C
          </ng-container>
          <ng-template #noTemp>N/A</ng-template>
        </ion-note>
      </ion-item>
    </ion-item-group>

    <ion-item-group *ngIf="metrics.memory as memory">
      <ion-item-divider>Memory</ion-item-divider>
      <ion-item>
        <ion-label>Percentage Used</ion-label>
        <ion-note slot="end">{{ memory['percentage-used'].value }} %</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Total</ion-label>
        <ion-note slot="end">
          <ion-text>{{ memory.total.value }} MiB</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Used</ion-label>
        <ion-note slot="end">
          <ion-text>{{ memory.used.value }} MiB</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Available</ion-label>
        <ion-note slot="end">{{ memory.available.value }} MiB</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>zram Used</ion-label>
        <ion-note slot="end">{{ memory['zram-used'].value }} MiB</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>zram Total</ion-label>
        <ion-note slot="end">{{ memory['zram-total'].value }} MiB</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>zram Available</ion-label>
        <ion-note slot="end">{{ memory['zram-available'].value }} MiB</ion-note>
      </ion-item>
    </ion-item-group>

    <ion-item-group *ngIf="metrics.cpu as cpu">
      <ion-item-divider>CPU</ion-item-divider>
      <ion-item>
        <ion-label>Percentage Used</ion-label>
        <ion-note slot="end">{{ cpu['percentage-used'].value }} %</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>User Space</ion-label>
        <ion-note slot="end">
          <ion-text>{{ cpu['user-space'].value }} %</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Kernel Space</ion-label>
        <ion-note slot="end">
          <ion-text>{{ cpu['kernel-space'].value }} %</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Idle</ion-label>
        <ion-note slot="end">{{ cpu.idle.value }} %</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>I/O Wait</ion-label>
        <ion-note slot="end">{{ cpu.wait.value }} %</ion-note>
      </ion-item>
    </ion-item-group>

    <ion-item-group *ngIf="metrics.disk as disk">
      <ion-item-divider>Disk</ion-item-divider>
      <ion-item>
        <ion-label>Percentage Used</ion-label>
        <ion-note slot="end">{{ disk['percentage-used'].value }} %</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Capacity</ion-label>
        <ion-note slot="end">
          <ion-text>{{ disk.capacity.value }} GB</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Used</ion-label>
        <ion-note slot="end">
          <ion-text>{{ disk.used.value }} GB</ion-text>
        </ion-note>
      </ion-item>
      <ion-item>
        <ion-label>Available</ion-label>
        <ion-note slot="end">{{ disk.available.value }} GB</ion-note>
      </ion-item>
    </ion-item-group>
  </ng-container>

  <ng-template #loading>
    <skeleton-list [groups]="4"></skeleton-list>
  </ng-template>
</ion-content>
